<template>
  <div class="contact-list-container">
    <!-- 搜索表单 -->
    <el-card class="contact-header"
:body-style="{ position: 'relative' }">
      <el-form
        ref="queryFormRef"
        :model="queryForm"
        :inline="true"
        label-width="80px"
        class="basic-search-form"
      >
        <el-form-item label="关键词">
          <el-input
            v-model="queryForm.keywords"
            placeholder="请输入联系人姓名或电话"
            clearable
            style="width: 220px"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="客户ID">
          <el-input
            v-model="queryForm.customer_id"
            placeholder="选填，按客户ID筛选"
            clearable
            style="width: 220px"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item>
          <div class="search-buttons">
            <div class="left-buttons">
              <el-button
type="primary" @click="handleSearch">
查询
</el-button>
              <el-button @click="handleReset">
重置
</el-button>
            </div>
            <div class="right-buttons">
              <el-button
type="success" @click="handleAdd">
新增联系人
</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="contact-content">
      <!-- 表格工具栏 -->
      <div class="table-toolbar">
        <el-button
          type="danger"
          :disabled="selectedContacts.length === 0"
          @click="handleBatchDelete"
        >
          批量删除
        </el-button>
      </div>

      <!-- 联系人表格 -->
      <el-table
        v-loading="loading"
        :data="contactList"
        border
        stripe
        class="custom-table"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"
width="55" />
        <el-table-column prop="name"
label="姓名" min-width="120" show-overflow-tooltip>
          <template #default="scope">
            <div class="contact-name-cell">
              <el-avatar :size="24"
icon="UserFilled" class="avatar-icon" />
              <span>{{ scope.row.name }}</span>
              <el-tag
                v-if="scope.row.is_default === 1"
                type="success"
                size="small"
                effect="dark"
                class="default-tag"
              >
                默认
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="customer_name"
          label="客户名称"
          min-width="150"
          show-overflow-tooltip
        >
          <template #default="scope">
            {{ scope.row.customer_name || `客户ID: ${scope.row.cid}` }}
          </template>
        </el-table-column>
        <el-table-column prop="cid"
label="客户ID" min-width="150" show-overflow-tooltip />
        <el-table-column prop="mobile"
label="电话" min-width="120" show-overflow-tooltip>
          <template #default="scope">
            <el-link type="primary"
:underline="false" v-if="scope.row.mobile">
              <el-icon><Phone /></el-icon>
              {{ scope.row.mobile }}
            </el-link>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="email"
label="邮箱" min-width="150" show-overflow-tooltip>
          <template #default="scope">
            <el-link type="primary"
:underline="false" v-if="scope.row.email">
              <el-icon><Message /></el-icon>
              {{ scope.row.email }}
            </el-link>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="wechat"
label="微信" min-width="120" show-overflow-tooltip>
          <template #default="scope">
            <span v-if="scope.row.wechat">{{ scope.row.wechat }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="position"
label="职位" min-width="120" show-overflow-tooltip />
        <el-table-column
          prop="create_time"
          label="创建时间"
          width="180"
          align="center"
          show-overflow-tooltip
        >
          <template #default="scope">
            {{ scope.row.create_time || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="操作"
width="150" fixed="right">
          <template #default="scope">
            <el-button size="small"
type="primary" plain @click="handleView(scope.row)">
              查看
            </el-button>
            <el-dropdown>
              <el-button size="small"
plain>
                更多
                <el-icon><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleEdit(scope.row)">
编辑
</el-dropdown-item>
                  <el-dropdown-item
                    v-if="scope.row.is_default !== 1"
                    @click="handleSetDefault(scope.row)"
                  >
                    设为默认
                  </el-dropdown-item>
                  <el-dropdown-item
divided @click="handleDelete(scope.row)">
删除
</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <BasePagination
          v-model="queryForm.page"
          v-model:page-size="queryForm.limit"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </el-card>

    <!-- 联系人详情抽屉 -->
    <GlobalDrawer
      v-model="detailDrawerVisible"
      title="联系人详情"
      size="60%"
      :show-footer-buttons="false"
    >
      <div class="drawer-content">
        <el-descriptions :column="2"
size="large" border>
          <el-descriptions-item label="姓名">
            {{ currentContact.name }}
          </el-descriptions-item>
          <el-descriptions-item label="客户名称">
            {{ currentContact.customer_name || `客户ID: ${currentContact.cid}` }}
          </el-descriptions-item>
          <el-descriptions-item label="性别">
            {{ currentContact.sex === 1 ? '男' : '女' }}
          </el-descriptions-item>
          <el-descriptions-item label="职位">
            {{ currentContact.position }}
          </el-descriptions-item>
          <el-descriptions-item label="手机">
            {{ currentContact.mobile }}
          </el-descriptions-item>
          <el-descriptions-item label="邮箱">
            {{ currentContact.email }}
          </el-descriptions-item>
          <el-descriptions-item label="QQ">
            {{ currentContact.qq }}
          </el-descriptions-item>
          <el-descriptions-item label="微信">
            {{ currentContact.wechat }}
          </el-descriptions-item>
          <el-descriptions-item label="昵称">
            {{ currentContact.nickname }}
          </el-descriptions-item>
          <el-descriptions-item label="部门">
            {{ currentContact.department }}
          </el-descriptions-item>
          <el-descriptions-item label="生日">
            {{ currentContact.birthday }}
          </el-descriptions-item>
          <el-descriptions-item label="地址">
            {{ currentContact.address }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ currentContact.create_time || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ currentContact.update_time || '-' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </GlobalDrawer>

    <!-- 联系人操作抽屉 -->
    <ContactDrawer
      v-model="contactDrawerVisible"
      :customer-id="currentCustomerId"
      :contact-id="currentContactId"
      :mode="contactOperationMode"
      :contact-data="currentContactData"
      @success="handleContactSuccess"
    />
  </div>
</template>

<script setup lang="ts">
  // 从外部文件导入所有逻辑
  import {
    // 响应式数据
    queryForm,
    contactList,
    total,
    loading,
    selectedContacts,
    detailDrawerVisible,
    contactDrawerVisible,
    currentContact,
    currentCustomerId,
    currentContactId,
    currentContactData,
    contactOperationMode,
    queryFormRef,

    // 方法
    handleSearch,
    handleReset,
    handleAdd,
    handleView,
    handleEdit,
    handleDelete,
    handleBatchDelete,
    handleSetDefault,
    handleSelectionChange,
    handleSizeChange,
    handleCurrentChange,
    closeDetailDrawer,
    handleContactSuccess,
    formatDateTime,
  } from './ContactListScript'

  // 导入组件
  import { GlobalDrawer } from '@/components/common'
  import BasePagination from '@/components/base/BasePagination.vue'
  import ContactDrawer from '@/components/business/customer/ContactDrawer.vue'
  import { Phone, Message } from '@element-plus/icons-vue'
  import { onMounted } from 'vue'

  // 初始化加载
  onMounted(() => {
    handleSearch()
  })
</script>

<style scoped src="./ContactListStyle.scss"></style>
